<template>
  <div>
    <h1 style="font-size: 18px;">{{ businessId === 'add' ? '新增' : '编辑'}}商户</h1>
      <!-- paymentStatus1-6:{{payment.paymentStatus}}-realnameState实名认证:{{payment.realnameState}}-(bankState银行卡绑定){{payment.bankState}} -->
    <el-card shadow="never">
      <el-tabs v-model="activeName" @tab-click="handleClick" ref="tabs">
        <el-tab-pane label="商户基本信息" name="first">
          <el-form @submit.native.prevent="save('from')" :rules="rules" ref="form" :model="model">
            <el-row>
              <el-col :span="4">
                <el-form-item prop="businessFaceImg" ref="Avatar">
                  <div class="content">
                    <div class="show-info">
                      <div class="pre">
                        <section class="pre-item">
                          <div v-show="!model.businessFaceImg" class="show-preview" :style="{'width': previews5.w + 'px', 'height': previews5.h + 'px',  'overflow': 'hidden',
                            'margin': '5px'}">
                            <div :style="previews5.div">
                              <img :src="previews5.url" :style="previews5.img">
                            </div>
                          </div>
                          <div v-show="model.businessFaceImg">
                            <img style="width: 236px; height: 277px;" :src="model.businessFaceImg" alt="">
                          </div>
                        </section>
                      </div>
                      <div class="test-button">
                        <label class="btn" for="uploads5" style="margin: 0 10px 30px 0px;">上传商户头像</label>
                        <input type="file" id="uploads5"
                          style="position:absolute; clip:rect(0 0 0 0);"
                          accept="image/png, image/jpeg, image/gif, image/jpg"
                          @change="uploadImg5($event, 1)"
                          ref="uploadImg5"
                        >
                        <!-- <a @click="down5('base64')" class="btn">拿到裁剪图片地址</a> -->
                      </div>
                    </div>
                  </div>
                  <!-- <el-upload class="avatar-uploader" ref="businessFaceImg" style="display: inline-block;"
                    action="https://upload.qiniup.com"
                    :on-remove='handleRemove'
                    :on-success="handleSuccessbusinessFaceImg"
                    :show-file-list="false"
                    :limit='1'
                    :data='uploadToken'
                    :before-upload="beforeUpload"
                  >
                    <img v-if="model.businessFaceImg" :src="model.businessFaceImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item>
                  <span>商户头像</span> -->
                </el-form-item>
              </el-col>
              <el-col :span="20">
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="展示名称" label-width="150px" prop="businessName">
                      <el-input v-model="model.businessName" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="8">
                    <el-form-item label="法人代表" label-width="150px" >
                      <el-input v-model="model.legalPerson" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="统一社会信用代码" label-width="150px">
                      <el-input v-model="model.unifiedSocialCreditCode" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="企业名称" label-width="150px">
                      <el-input v-model="model.businessLicenseCompanyName" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="手机号码" label-width="150px" prop="phone" ref="phone">
                      <el-input v-model="model.phone" placeholder="输入11位手机号码" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="营业执照失效期" label-width="150px">
                      <el-input v-model="model.businessLicenseExpirationDate" size="small"></el-input>
                    </el-form-item>
                    <el-form-item label="注册地址" label-width="150px">
                      <el-input v-model="model.businessLicenseAddress" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="8">
                    <el-form-item label="性别" label-width="150px">
                      <el-radio-group v-model="model.sex" @change="changeSex" size="mini">
                        <el-radio border label="1">男</el-radio>
                        <el-radio border label="2">女</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="商户经营范围" label-width="150px">
                      <el-input v-model="model.fareScope" size="small"></el-input>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="商户主营类型" label-width="150px">
                      <el-radio-group v-model="model.businessType" @change="changeBusinessType" size="mini">
                        <el-radio border :label="item.label" v-for="item in businessTypeList" :key="item.value">
                          <span>{{item.label}}</span>
                        </el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item label="营业状态" label-width="150px">
                      <el-radio-group v-model="model.status" @change="changeStatus" size="mini">
                        <el-radio border label="1">在营</el-radio>
                        <el-radio border label="2">修业</el-radio>
                        <el-radio border label="3">注销</el-radio>
                        <el-radio border label="4">注册</el-radio>
                        <el-radio border label="5">待绑卡</el-radio>
                      </el-radio-group>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-col>
            </el-row>

            <p style="margin: 60px 0 30px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #004e66; margin-right: 10px;"></span>
            相关照片附件
            </p>
            <el-row :gutter="20">
              <el-col :span="4" style="padding-left: 20px;">
                <el-form-item>
                  <el-upload class="avatar-uploader" ref="businessLicenseImg" style="display: inline-block;"
                            action="https://upload.qiniup.com"
                            :on-remove='handleRemove'
                            :on-success="handleSuccessbusinessLicenseImg"
                            :show-file-list="false"
                            :limit='1'
                            :data='uploadToken'
                            :before-upload="beforeUpload"
                  >
                    <img v-if="model.businessLicenseImg" :src="model.businessLicenseImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item>
                  <span style="padding-left: 48px;">营业执照照片</span>
                </el-form-item>
              </el-col>
              <el-col :span="4" style="margin-bottom: 20px;">
                <el-form-item>
                  <el-upload class="avatar-uploader" ref="shopPhoto" style="display: inline-block;"
                            action="https://upload.qiniup.com"
                            :on-remove='handleRemove'
                            :on-success="handleSuccessshopPhoto"
                            :show-file-list="false"
                            :limit='1'
                            :data='uploadToken'
                            :before-upload="beforeUpload"
                  >
                    <img v-if="model.shopPhoto" :src="model.shopPhoto" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item>
                  <span style="padding-left: 66px;">门头照</span>
                </el-form-item>
              </el-col>
              <el-col :span="4" style="padding-left: 20px;">
                <el-form-item>
                  <el-upload class="avatar-uploader" ref="standDoorImg" style="display: inline-block;"
                            action="https://upload.qiniup.com"
                            :on-remove='handleRemove'
                            :on-success="handleSuccessstandDoorImg"
                            :show-file-list="false"
                            :limit='1'
                            :data='uploadToken'
                            :before-upload="beforeUpload"
                  >
                    <img v-if="model.standDoorImg" :src="model.standDoorImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item>
                  <span style="padding-left: 60px;">站门头照</span>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin-bottom: 30px;">
              <el-col :span="8" style="color: #fff;">0</el-col>
              <el-col :span="8">
                <el-button type="primary" native-type="submit" style="background: #004e66;margin-top: 50px;">保存</el-button>
              </el-col>
              <el-col :span="8" style="color: #fff;">0</el-col>
            </el-row>
          </el-form>
        </el-tab-pane>


        <el-tab-pane label="身份及开户信息" name="second">
          <el-form @submit.native.prevent="saveTabsSecond">
            <el-row>
              <el-col :span="8">
                <p style="margin: 20px 0 20px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #004e66; margin-right: 10px;"></span>
                  开户信息
                </p>
              </el-col>
              <el-col :span="16">
                <div style="margin: 20px 0 20px;font-size: 16px;">商户当前开户状态： <span style="color: red;">{{bankName}}</span></div>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="3">
                <el-form-item>
                  <el-upload
                    :disabled="payment.paymentStatus === 5 || (payment.paymentStatus !== 1 && payment.bankState === 1)"
                            class="avatar-uploader" ref="bankCardImg" style="display: inline-block;"
                            action="https://upload.qiniup.com"
                            :on-remove='handleRemove'
                            :on-success="handleSuccessbankCardImg"
                            :show-file-list="false"
                            :limit='1'
                            :data='uploadToken'
                            :before-upload="beforeUpload"
                  >
                    <img v-if="modelSecond.bankCardImg" :src="modelSecond.bankCardImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item>
                  <span style="padding-left: 50px;">银行卡照片</span>
                </el-form-item>
              </el-col>
              <el-col :span="21">
                <el-form-item label="银行账号" label-width="130px">
                  <el-input :disabled="payment.paymentStatus === 5 || (payment.paymentStatus !== 1 && payment.bankState === 1)" v-model="modelSecond.account" size="small"></el-input>
                </el-form-item>
                <el-form-item label="开户名称" label-width="130px">
                  <el-input :disabled="payment.paymentStatus === 5 || (payment.paymentStatus !== 1 && payment.bankState === 1)" v-model="modelSecond.idCardFullName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="开户行" label-width="130px">
                  <el-input :disabled="payment.paymentStatus === 5 || (payment.paymentStatus !== 1 && payment.bankState === 1)" v-model="modelSecond.bank" size="small"></el-input>
                </el-form-item>
                <el-form-item label="开户支行" label-width="130px">
                  <el-input :disabled="payment.paymentStatus === 5 || (payment.paymentStatus !== 1 && payment.bankState === 1)" v-model="modelSecond.openBankBranch" size="small"></el-input>
                </el-form-item>
                <el-form-item label="银行预留手机号" label-width="130px">
                  <el-input :disabled="payment.paymentStatus === 5 || (payment.paymentStatus !== 1 && payment.bankState === 1)" v-model="modelSecond.bindCardPhone" size="small"></el-input>
                </el-form-item>
                <el-form-item label="" label-width="130px">
                  <el-button v-show="payment.paymentStatus !== 5 && (payment.paymentStatus === 4 || (payment.paymentStatus !== 1 && payment.bankState !== 1))"
                    type="primary" @click="bindCardClick" style="background: #004e66;">绑定银行卡</el-button>

                  <el-button v-show="payment.paymentStatus !== 4 && payment.bankState === 1"
                    type="primary" @click="replaceBindCardClick" style="background: #004e66;">更换银行卡</el-button>

                  <el-button v-show="payment.paymentStatus === 5"
                    type="primary" @click="finallyVerificationClick" style="background: #004e66;">输入验证码</el-button>
                </el-form-item>
              </el-col>
            </el-row>


            <el-row>
              <el-col :span="8">
                <p style="margin: 50px 0 20px;font-size: 16px;"><span style="color: #f65f2f;border: 3px solid #004e66; margin-right: 10px;"></span>
                  身份信息
                </p>
              </el-col>
              <el-col :span="16">
                <div style="margin: 50px 0 20px;font-size: 16px;">商户当前身份状态： <span style="color: red;">{{idName}}</span></div>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="6">
                <el-form-item>
                  <span style="padding-left: 130px;">身份证正面照片</span>
                </el-form-item>
                <el-form-item label-width="90px">
                  <el-upload
                    :disabled="payment.paymentStatus !== 1 && payment.paymentStatus !== 6 && payment.realnameState !== 3"
                            class="avatar-uploader" ref="idCardFrontImg" style="display: inline-block;"
                            action="https://upload.qiniup.com"
                            :on-remove='handleRemove'
                            :on-success="handleSuccessidCardFrontImg"
                            :show-file-list="false"
                            :limit='1'
                            :data='uploadToken'
                            :before-upload="beforeUpload"
                  >
                    <img v-if="modelSecond.idCardFrontImg" :src="modelSecond.idCardFrontImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="身份证号" label-width="130px">
                  <el-input
                    :disabled="payment.paymentStatus !== 1 && payment.paymentStatus !== 6 && payment.realnameState !== 3"
                    v-model="modelSecond.idNumber" size="small">
                  </el-input>
                </el-form-item>
                <el-form-item label="身份证姓名" label-width="130px">
                  <el-input
                    :disabled="payment.paymentStatus !== 1 && payment.paymentStatus !== 6 && payment.realnameState !== 3"
                    v-model="modelSecond.idCardFullName" size="small">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item>
                  <span style="padding-left: 130px;">身份证反面照片</span>
                </el-form-item>
                <el-form-item label-width="90px">
                  <el-upload
                    :disabled="payment.paymentStatus !== 1 && payment.paymentStatus !== 6 && payment.realnameState !== 3"
                            class="avatar-uploader" ref="idCardBackImg" style="display: inline-block;"
                            action="https://upload.qiniup.com"
                            :on-remove='handleRemove'
                            :on-success="handleSuccessidCardBackImg"
                            :show-file-list="false"
                            :limit='1'
                            :data='uploadToken'
                            :before-upload="beforeUpload"
                  >
                    <img v-if="modelSecond.idCardBackImg" :src="modelSecond.idCardBackImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item label="身份证有效期" label-width="130px">
                  <el-input
                    :disabled="payment.paymentStatus !== 1 && payment.paymentStatus !== 6 && payment.realnameState !== 3"
                    v-model="modelSecond.idValidity" size="small"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" v-show="payment.paymentStatus !== 1">
                <el-form-item>
                  <span style="padding-left: 140px;">手持身份证</span>
                </el-form-item>
                <el-form-item label-width="90px">
                  <el-upload
                    :disabled="payment.paymentStatus !== 1 && payment.paymentStatus !== 6 && payment.realnameState !== 3"
                            class="avatar-uploader" ref="handIdCardImg" style="display: inline-block;"
                            action="https://upload.qiniup.com"
                            :on-remove='handleRemove'
                            :on-success="handleSuccesshandIdCardImg"
                            :show-file-list="false"
                            :limit='1'
                            :data='uploadToken'
                            :before-upload="beforeUpload"
                  >
                    <img v-if="modelSecond.handIdCardImg" :src="modelSecond.handIdCardImg" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row style="margin-bottom: 30px;">
              <el-col :span="8" style="color: #fff;">0</el-col>
              <el-col :span="8">
                <el-button v-show="payment.paymentStatus === 1" type="primary" native-type="saveTabsSecond" style="background: #004e66;margin-top: 30px;">保存</el-button>
                <el-button v-show="payment.paymentStatus !== 1"
                  :disabled="payment.paymentStatus !== 1 && payment.paymentStatus !== 6 && payment.realnameState !== 3"
                  type="primary" @click="realNameClick" style="background: #004e66;margin-top: 30px;">实名认证</el-button>
              </el-col>
              <el-col :span="8" style="color: #fff;">0</el-col>
            </el-row>
          </el-form>
        </el-tab-pane>


        <el-tab-pane label="公示信息" name="third">


          <div class="content">
            <el-row :gutter="10">
              <el-col :span="5">
                <div class="show-info" v-show="marketStyle === 3 || marketStyle === 1">
                  <div class="test-button">
                    <label class="btn" for="uploads">上传背景图</label>
                    <input type="file" id="uploads"
                      style="position:absolute; clip:rect(0 0 0 0);"
                      accept="image/png, image/jpeg, image/gif, image/jpg"
                      @change="uploadImg($event, 1)"
                      ref="uploadImg"
                    >
                    <!-- <a @click="down('base64')" class="btn">拿到裁剪图片地址</a> -->
                  </div>
                  <div class="pre">
                    <section class="pre-item">
                      <div class="show-preview" :style="{'width': previews.w + 'px', 'height': previews.h + 'px',  'overflow': 'hidden',
                        'margin': '5px'}">
                        <div :style="previews.div">
                          <img :src="previews.url" :style="previews.img">
                        </div>
                      </div>
                    </section>
                  </div>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="show-info" v-show="marketStyle === 3 || marketStyle === 1">
                  <div class="test-button">
                    <label class="btn" for="uploads1">上传前景图</label>
                    <input type="file" id="uploads1"
                      style="position:absolute; clip:rect(0 0 0 0);"
                      accept="image/png, image/jpeg, image/gif, image/jpg"
                      @change="uploadImg1($event, 1)"
                      ref="uploadImg1"
                    >
                    <!-- <a @click="down1('base64')" class="btn">拿到裁剪图片地址</a> -->
                  </div>
                  <div class="pre">
                    <section class="pre-item">
                      <div class="show-preview" :style="{'width': previews1.w + 'px', 'height': previews1.h + 'px',  'overflow': 'hidden',
                        'margin': '5px'}">
                        <div :style="previews1.div">
                          <img :src="previews1.url" :style="previews1.img">
                        </div>
                      </div>
                    </section>
                  </div>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="show-info" v-show="marketStyle === 3 || marketStyle === 1">
                  <div class="test-button">
                    <label class="btn" for="uploads2">上传下方图</label>
                    <input type="file" id="uploads2"
                      style="position:absolute; clip:rect(0 0 0 0);"
                      accept="image/png, image/jpeg, image/gif, image/jpg"
                      @change="uploadImg2($event, 1)"
                      ref="uploadImg2"
                    >
                    <!-- <a @click="down2('base64')" class="btn">拿到裁剪图片地址</a> -->
                  </div>
                  <div class="pre">
                    <section class="pre-item">
                      <div class="show-preview" :style="{'width': previews2.w + 'px', 'height': previews2.h + 'px',  'overflow': 'hidden',
                        'margin': '5px'}">
                        <div :style="previews2.div">
                          <img :src="previews2.url" :style="previews2.img">
                        </div>
                      </div>
                    </section>
                  </div>
                </div>
              </el-col>
              <el-col :span="5">
                <div class="show-info" v-show="marketStyle === 2">
                  <div class="test-button">
                    <label class="btn" for="uploads3">上传扩展图1</label>
                    <input type="file" id="uploads3"
                      style="position:absolute; clip:rect(0 0 0 0);"
                      accept="image/png, image/jpeg, image/gif, image/jpg"
                      @change="uploadImg3($event, 1)"
                      ref="uploadImg3"
                    >
                    <!-- <a @click="down3('base64')" class="btn">拿到裁剪图片地址</a> -->
                  </div>
                  <div class="pre">
                    <section class="pre-item">
                      <div class="show-preview" :style="{'width': previews3.w + 'px', 'height': previews3.h + 'px',  'overflow': 'hidden',
                        'margin': '5px'}">
                        <div :style="previews3.div">
                          <img :src="previews3.url" :style="previews3.img">
                        </div>
                      </div>
                    </section>
                  </div>
                </div>
              </el-col>
              <el-col :span="4">
                <div class="show-info" v-show="marketStyle === 2">
                  <div class="test-button">
                    <label class="btn" for="uploads4">上传扩展图2</label>
                    <input type="file" id="uploads4"
                      style="position:absolute; clip:rect(0 0 0 0);"
                      accept="image/png, image/jpeg, image/gif, image/jpg"
                      @change="uploadImg4($event, 1)"
                      ref="uploadImg4"
                    >
                    <!-- <a @click="down4('base64')" class="btn">拿到裁剪图片地址</a> -->
                  </div>
                  <div class="pre">
                    <section class="pre-item">
                      <div class="show-preview" :style="{'width': previews4.w + 'px', 'height': previews4.h + 'px',  'overflow': 'hidden',
                        'margin': '5px'}">
                        <div :style="previews4.div">
                          <img :src="previews4.url" :style="previews4.img">
                        </div>
                      </div>
                    </section>
                  </div>
                </div>
              </el-col>
            </el-row>
            <el-row :gutter="20" style="margin-top: 100px">
              <el-col :span="6" :offset="10">
                <el-button type="primary" @click="submitAllImg">提交所有图片</el-button>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>


        <el-tab-pane label="静态码" name="four">
          <div class="content">
            <div class="show-info">
              <div class="test-button">
                <label class="btn" for="uploads6" style="margin: 0 10px 30px 0px;">上传静态码</label>
                <input type="file" id="uploads6"
                  style="position:absolute; clip:rect(0 0 0 0);"
                  accept="image/png, image/jpeg, image/gif, image/jpg"
                  @change="uploadImg6($event, 1)"
                  ref="uploadImg6"
                >
              </div>
              <div class="pre">
                <section class="pre-item">
                  <div v-show="!staticCodeImg" class="show-preview" :style="{'width': previews6.w + 'px', 'height': previews6.h + 'px',  'overflow': 'hidden',
                    'margin': '5px'}">
                    <div :style="previews6.div">
                      <img :src="previews6.url" :style="previews6.img">
                    </div>
                  </div>
                  <div v-show="staticCodeImg">
                    <img style="" :src="staticCodeImg" alt="">
                  </div>
                </section>
              </div>
            </div>
          </div>
          <el-row :gutter="20" style="margin-top: 100px">
            <el-col :span="6" :offset="10">
              <el-button type="primary" @click="submitStaticCodeImg">提交静态码图片</el-button>
            </el-col>
          </el-row>
        </el-tab-pane>
      </el-tabs>
    </el-card>
    <el-dialog title="请输入验证码" :visible.sync="messageDialog" @close="close" width="30%">
      <div style="">
        <el-input v-model="message" size="small"></el-input>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button v-show="payment.paymentStatus === 5" type="warning" @click="bindCardResetSendSms">重发</el-button>
        <el-button type="primary" @click="validation">验证</el-button>
      </div>
    </el-dialog>


    <el-dialog title="裁剪背景图" :visible.sync="backimgDialog" @close="close">
      <div>
        <div class="test test1">
          <vueCropper
            ref="cropper"
            :img="option.img"
            :outputSize="option.size"
            :outputType="option.outputType"
            :info="true"
            :full="option.full"
            :canMove="option.canMove"
            :canMoveBox="option.canMoveBox"
            :fixedBox="option.fixedBox"
            :original="option.original"
            :autoCrop="option.autoCrop"
            :autoCropWidth="option.autoCropWidth"
            :autoCropHeight="option.autoCropHeight"
            :centerBox="option.centerBox"
            :high="option.high"
            :infoTrue="option.infoTrue"
            :maxImgSize="option.maxImgSize"
            @realTime="realTime"
            @imgLoad="imgLoad"
            @cropMoving="cropMoving"
            :enlarge="option.enlarge"
            :mode="option.mode"
            :limitMinSize="option.limitMinSize"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="down('base64')">保存背景图</el-button>
      </div>
    </el-dialog>
    <el-dialog title="裁剪前景图" :visible.sync="frontimgDialog" @close="close">
      <div>
        <div class="test test1">
          <vueCropper
            ref="cropper1"
            :img="option1.img"
            :outputSize="option1.size"
            :outputType="option1.outputType"
            :info="true"
            :full="option1.full"
            :canMove="option1.canMove"
            :canMoveBox="option1.canMoveBox"
            :fixedBox="option1.fixedBox"
            :original="option1.original"
            :autoCrop="option1.autoCrop"
            :autoCropWidth="option1.autoCropWidth"
            :autoCropHeight="option1.autoCropHeight"
            :centerBox="option1.centerBox"
            :high="option1.high"
            :infoTrue="option1.infoTrue"
            :maxImgSize="option1.maxImgSize"
            @realTime="realTime1"
            @imgLoad="imgLoad1"
            @cropMoving="cropMoving1"
            :enlarge="option1.enlarge"
            :mode="option1.mode"
            :limitMinSize="option1.limitMinSize"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="down1('base64')">保存前景图</el-button>
      </div>
    </el-dialog>
    <el-dialog title="裁剪下方图" :visible.sync="bottomimgDialog" @close="close">
      <div>
        <div class="test test1">
          <vueCropper
            ref="cropper2"
            :img="option2.img"
            :outputSize="option2.size"
            :outputType="option2.outputType"
            :info="true"
            :full="option2.full"
            :canMove="option2.canMove"
            :canMoveBox="option2.canMoveBox"
            :fixedBox="option2.fixedBox"
            :original="option2.original"
            :autoCrop="option2.autoCrop"
            :autoCropWidth="option2.autoCropWidth"
            :autoCropHeight="option2.autoCropHeight"
            :centerBox="option2.centerBox"
            :high="option2.high"
            :infoTrue="option2.infoTrue"
            :maxImgSize="option2.maxImgSize"
            @realTime="realTime2"
            @imgLoad="imgLoad2"
            @cropMoving="cropMoving2"
            :enlarge="option2.enlarge"
            :mode="option2.mode"
            :limitMinSize="option2.limitMinSize"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="down2('base64')">保存下方图</el-button>
      </div>
    </el-dialog>
    <el-dialog title="裁剪扩展图1" :visible.sync="extraimg1Dialog" @close="close">
      <div>
        <div class="test test1">
          <vueCropper
            ref="cropper3"
            :img="option3.img"
            :outputSize="option3.size"
            :outputType="option3.outputType"
            :info="true"
            :full="option3.full"
            :canMove="option3.canMove"
            :canMoveBox="option3.canMoveBox"
            :fixedBox="option3.fixedBox"
            :original="option3.original"
            :autoCrop="option3.autoCrop"
            :autoCropWidth="option3.autoCropWidth"
            :autoCropHeight="option3.autoCropHeight"
            :centerBox="option3.centerBox"
            :high="option3.high"
            :infoTrue="option3.infoTrue"
            :maxImgSize="option3.maxImgSize"
            @realTime="realTime3"
            @imgLoad="imgLoad3"
            @cropMoving="cropMoving3"
            :enlarge="option3.enlarge"
            :mode="option3.mode"
            :limitMinSize="option3.limitMinSize"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="down3('base64')">保存扩展图1</el-button>
      </div>
    </el-dialog>
    <el-dialog title="裁剪扩展图2" :visible.sync="extraimg2Dialog" @close="close">
      <div>
        <div class="test test1">
          <vueCropper
            ref="cropper4"
            :img="option4.img"
            :outputSize="option4.size"
            :outputType="option4.outputType"
            :info="true"
            :full="option4.full"
            :canMove="option4.canMove"
            :canMoveBox="option4.canMoveBox"
            :fixedBox="option4.fixedBox"
            :original="option4.original"
            :autoCrop="option4.autoCrop"
            :autoCropWidth="option4.autoCropWidth"
            :autoCropHeight="option4.autoCropHeight"
            :centerBox="option4.centerBox"
            :high="option4.high"
            :infoTrue="option4.infoTrue"
            :maxImgSize="option4.maxImgSize"
            @realTime="realTime4"
            @imgLoad="imgLoad4"
            @cropMoving="cropMoving4"
            :enlarge="option4.enlarge"
            :mode="option4.mode"
            :limitMinSize="option4.limitMinSize"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="down4('base64')">保存扩展图1</el-button>
      </div>
    </el-dialog>

    <el-dialog title="裁剪商户头像" :visible.sync="avatarDialog" @close="close">
      <div>
        <div class="test test1">
          <vueCropper
            ref="cropper5"
            :img="option5.img"
            :outputSize="option5.size"
            :outputType="option5.outputType"
            :info="true"
            :full="option5.full"
            :canMove="option5.canMove"
            :canMoveBox="option5.canMoveBox"
            :fixedBox="option5.fixedBox"
            :original="option5.original"
            :autoCrop="option5.autoCrop"
            :autoCropWidth="option5.autoCropWidth"
            :autoCropHeight="option5.autoCropHeight"
            :centerBox="option5.centerBox"
            :high="option5.high"
            :infoTrue="option5.infoTrue"
            :maxImgSize="option5.maxImgSize"
            @realTime="realTime5"
            @imgLoad="imgLoad5"
            @cropMoving="cropMoving5"
            :enlarge="option5.enlarge"
            :mode="option5.mode"
            :limitMinSize="option5.limitMinSize"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="down5('base64')">保存商户头像</el-button>
      </div>
    </el-dialog>

    <el-dialog title="裁剪静态码" :visible.sync="staticCodeDialog" width=95% @close="close">
      <div>
        <div class="test test1">
          <vueCropper
            ref="cropper6"
            :img="option6.img"
            :outputSize="option6.size"
            :outputType="option6.outputType"
            :info="true"
            :full="option6.full"
            :canMove="option6.canMove"
            :canMoveBox="option6.canMoveBox"
            :fixedBox="option6.fixedBox"
            :original="option6.original"
            :autoCrop="option6.autoCrop"
            :autoCropWidth="option6.autoCropWidth"
            :autoCropHeight="option6.autoCropHeight"
            :centerBox="option6.centerBox"
            :high="option6.high"
            :infoTrue="option6.infoTrue"
            :maxImgSize="option6.maxImgSize"
            @realTime="realTime6"
            @imgLoad="imgLoad6"
            @cropMoving="cropMoving6"
            :mode="option6.mode"
            :enlarge="option4.enlarge"
            :limitMinSize="option6.limitMinSize"
          ></vueCropper>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="down6('base64')">保存静态码</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import MySelect from "@/components/MySelect"

  export default {
    data(){
// let url = (rule, value, callback) => {
//   console.log("头像",this.previews5.url,this.$refs.Avatar)
//       if (this.previews5.url==null) {
//         callback(new Error("请上传头像"));
//       } else {
//         callback();
//       }
//     };
      return {
        rules: {
        businessName: [
          { required: true, message: "请输入展示名称", trigger: "blur" }
        ],
        businessFaceImg: [
          { required: true, message: "请上传头像", trigger: "change" }
        ],
        phone: [{
            required: true,
            message: '请输入手机号',
             trigger: "change"
          },
          {
            pattern: /^1[0123456789]\d{9}$/,
            message: '手机号格式不对',
            trigger: 'change'
          },
        ]
        },
        marketStyle: 1, // 布局类型 1 2 3
        activeName: 'first',
        businessTypeList: [],
        model: { // first
          businessId: 0, //	int	true	商户id	为0时新增 大于0 编辑
          sex: 1, //	string	true	性别 0.未知 1.男 2.女
          status: '1', // string	true	营业状态-1 全部 1:在营,2:修业,3:注销 4.注册 5.待绑卡	营业状态关键字：business_status
          businessType: '蔬菜', // 商户经营类型	-1 全部
          shopPhoto: '', // 门头照
          businessFaceImg: '', // 商户头像
          businessLicenseImg: '', // 营业执照照片
          businessName: '', // 	string	true	商户名称
          legalPerson: '', // 	string	true	法人
          phone: '', // 	string	true	手机号码
          fareScope: '', // 	string	false	商户经营范围
          unifiedSocialCreditCode: '', // 	string	false	统一社会信用代码
          businessLicenseExpirationDate: '', // 	string	false	营业执照失效期
          stallName: '', // 	string	true	摊位名称	摊位名称
          standDoorImg: '', // 站门头照
          businessLicenseCompanyName: '', // 营业执照上的企业名称
          businessLicenseAddress: '', // 营业执照注册地址
        },
        modelSecond: { // second
          bindCardPhone: '', // 	string	true	银行预留手机号
          bankCardImg: '', // 银行卡照片
          idCardBackImg: '', // 身份证反面照片
          idCardFrontImg: '', // 身份证正面照片
          idNumber: '', // 	string	false	身份证号码
          idCardFullName: '', // string	true	身份证名字、开户名称
          account: '', // 	string	false	银行账户
          bank: '', // 	string	false	开户行
          openBankBranch: '', // 	string	false	开户支行
          handIdCardImg: '', //	string	false	手持身份证
          idValidity: '', // 身份证有效期
          personInCharge: '', // string	true	负责人、开户名称	和account传同一个值
          idTimeOrNoPer: 0, // int	true	身份证是否长期：0 非长期 1 长期
        },
        uploadToken:{
          key: '',
          token: ''
        },

        // 开通状态
        bankName: '', // 开户状态名称
        idName: '', // 身份状态名称
        payment:{	//	json	支付状态
          paymentStatus: 0, // int	支付状态	1.未开通 2.已提交材料 3.已提交(job执行完) 4.已开通 5.可以输入验证码 6.认证失败
          realnameState: 0, // 	int	实名认证状态	0.未认证 1.已认证 2.审核中 3.认证失败
          bankState: 0, // 	string	银行卡绑定状态	0.未绑定 1.已绑定 2.待确认 3.失败
          openBankBranch: '', // string|开户支行
        },

        messageDialog: false, // 验证码弹框
        message: '', // 验证码
        flag: 0,


        // 图片裁剪
        qiniuImg:{
          backimg: '', //	string	true	背景图
          frontimg: '', //	string	true	前景图
          bottomimg: '', //	string	true	下方图
          extraimg1: '', //	string	true	扩展图
          extraimg2: '', //	string	true	扩展图
        },


      /** 上传 裁剪 存 背景图 start */
        backimgDialog: false,
        backimg: '', // 背景图 裁剪后的图片地址
        previews: {},
        lists: [
          {
            img: "http://cdn.xyxiao.cn/Landscape_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_2.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_3.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_4.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_2.jpg"
          }
        ],
        option: {
          img: "", // 裁剪图片的地址	空	url 地址 || base64 || blob
          size: 1,
          full: false, // 是否输出原图比例的截图	false	true | false
          outputType: 'png', // 裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
          canMove: true, // 上传图片是否可以移动	true	true | false
          fixedBox: true, // 固定截图框大小 不允许改变	false	true | false
          original: false, // 上传图片按照原始比例渲染	false	true | false
          canMoveBox:  false, // 截图框能否拖动	true	true | false
          autoCrop: true, // 是否默认生成截图框	false	true || false
          canScale: true, // 图片是否允许滚轮缩放	true	true || false
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 282, // 默认生成截图框宽度	容器的80%	0~max
          autoCropHeight: 325, // 默认生成截图框高度	容器的80%	0~max
          centerBox: false, // 截图框是否被限制在图片里面	false	true | false
          high: true, // 是否按照设备的dpr 输出等比例图片	true	true | false
          cropData: {},
          enlarge: 1,
          mode: 'contain',
          maxImgSize: 3000,
          limitMinSize: [282, 325]
        },
      /** 上传 裁剪 存 背景图 end */


      /** 上传 裁剪 存 前景图 start */
        frontimgDialog: false,
        frontimg: '', // 前景图 裁剪后的图片地址
        previews1: {},
        lists1: [
          // {
          // 	img: 'https://fengyuanchen.github.io/cropper/images/picture.jpg'
          // },
          {
            img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_2.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_3.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_4.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_2.jpg"
          }
        ],
        option1: {
          img: "", // 裁剪图片的地址	空	url 地址 || base64 || blob
          size: 1,
          full: false, // 是否输出原图比例的截图	false	true | false
          outputType: 'png', // 裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
          canMove: true, // 上传图片是否可以移动	true	true | false
          fixedBox: true, // 固定截图框大小 不允许改变	false	true | false
          original: false, // 上传图片按照原始比例渲染	false	true | false
          canMoveBox:  false, // 截图框能否拖动	true	true | false
          autoCrop: true, // 是否默认生成截图框	false	true || false
          canScale: true, // 图片是否允许滚轮缩放	true	true || false
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 282, // 默认生成截图框宽度	容器的80%	0~max
          autoCropHeight: 325, // 默认生成截图框高度	容器的80%	0~max
          centerBox: false, // 截图框是否被限制在图片里面	false	true | false
          high: true, // 是否按照设备的dpr 输出等比例图片	true	true | false
          cropData: {},
          enlarge: 1,
          mode: 'contain',
          maxImgSize: 3000,
          limitMinSize: [282, 325]
        },
      /** 上传 裁剪 存 前景图 end */


      /** 上传 裁剪 存 下方图 start */
        bottomimgDialog: false,
        bottomimg: '', // 下方图 裁剪后的图片地址
        previews2: {},
        lists2: [
          // {
          // 	img: 'https://fengyuanchen.github.io/cropper/images/picture.jpg'
          // },
          {
            img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_2.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_3.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_4.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_2.jpg"
          }
        ],
        option2: {
          img: "", // 裁剪图片的地址	空	url 地址 || base64 || blob
          size: 1,
          full: false, // 是否输出原图比例的截图	false	true | false
          outputType: 'png', // 裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
          canMove: true, // 上传图片是否可以移动	true	true | false
          fixedBox: true, // 固定截图框大小 不允许改变	false	true | false
          original: false, // 上传图片按照原始比例渲染	false	true | false
          canMoveBox:  false, // 截图框能否拖动	true	true | false
          autoCrop: true, // 是否默认生成截图框	false	true || false
          canScale: true, // 图片是否允许滚轮缩放	true	true || false
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 282, // 默认生成截图框宽度	容器的80%	0~max
          autoCropHeight: 284, // 默认生成截图框高度	容器的80%	0~max
          centerBox: false, // 截图框是否被限制在图片里面	false	true | false
          high: true, // 是否按照设备的dpr 输出等比例图片	true	true | false
          cropData: {},
          enlarge: 1,
          mode: 'contain',
          maxImgSize: 3000,
          limitMinSize: [282, 325]
        },
      /** 上传 裁剪 存 下方图 end */


      /** 上传 裁剪 存 扩展图1 start */
        extraimg1Dialog: false,
        extraimg1: '', // 扩展图1 裁剪后的图片地址
        previews3: {},
        lists3: [
          // {
          // 	img: 'https://fengyuanchen.github.io/cropper/images/picture.jpg'
          // },
          {
            img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_2.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_3.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_4.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_2.jpg"
          }
        ],
        option3: {
          img: "", // 裁剪图片的地址	空	url 地址 || base64 || blob
          size: 1,
          full: false, // 是否输出原图比例的截图	false	true | false
          outputType: 'png', // 裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
          canMove: true, // 上传图片是否可以移动	true	true | false
          fixedBox: true, // 固定截图框大小 不允许改变	false	true | false
          original: false, // 上传图片按照原始比例渲染	false	true | false
          canMoveBox:  false, // 截图框能否拖动	true	true | false
          autoCrop: true, // 是否默认生成截图框	false	true || false
          canScale: true, // 图片是否允许滚轮缩放	true	true || false
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 282, // 默认生成截图框宽度	容器的80%	0~max
          autoCropHeight: 305, // 默认生成截图框高度	容器的80%	0~max
          centerBox: false, // 截图框是否被限制在图片里面	false	true | false
          high: true, // 是否按照设备的dpr 输出等比例图片	true	true | false
          cropData: {},
          enlarge: 1,
          mode: 'contain',
          maxImgSize: 3000,
          limitMinSize: [282, 325]
        },
      /** 上传 裁剪 存 扩展图1 end */


      /** 上传 裁剪 存 扩展图2 start */
        extraimg2Dialog: false,
        extraimg2: '', // 扩展图2 裁剪后的图片地址
        previews4: {},
        lists4: [
          // {
          // 	img: 'https://fengyuanchen.github.io/cropper/images/picture.jpg'
          // },
          {
            img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_2.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_3.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_4.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_2.jpg"
          }
        ],
        option4: {
          img: "", // 裁剪图片的地址	空	url 地址 || base64 || blob
          size: 1,
          full: false, // 是否输出原图比例的截图	false	true | false
          outputType: 'png', // 裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
          canMove: true, // 上传图片是否可以移动	true	true | false
          fixedBox: true, // 固定截图框大小 不允许改变	false	true | false
          original: false, // 上传图片按照原始比例渲染	false	true | false
          canMoveBox:  false, // 截图框能否拖动	true	true | false
          autoCrop: true, // 是否默认生成截图框	false	true || false
          canScale: true, // 图片是否允许滚轮缩放	true	true || false
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 282, // 默认生成截图框宽度	容器的80%	0~max
          autoCropHeight: 304, // 默认生成截图框高度	容器的80%	0~max
          centerBox: false, // 截图框是否被限制在图片里面	false	true | false
          high: true, // 是否按照设备的dpr 输出等比例图片	true	true | false
          cropData: {},
          enlarge: 1,
          mode: 'contain',
          maxImgSize: 3000,
          limitMinSize: [282, 325]
        },
      /** 上传 裁剪 存 扩展图2 end */



      /** 上传 裁剪 存 商户头像 start */
        avatarDialog: false,
        // extraimg1: '', // 扩展图1 裁剪后的图片地址
        previews5: {},
        lists5: [
          // {
          // 	img: 'https://fengyuanchen.github.io/cropper/images/picture.jpg'
          // },
          {
            img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_2.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_3.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_4.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_2.jpg"
          }
        ],
        option5: {
          img: "", // 裁剪图片的地址	空	url 地址 || base64 || blob
          size: 1,
          full: false, // 是否输出原图比例的截图	false	true | false
          outputType: 'png', // 裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
          canMove: true, // 上传图片是否可以移动	true	true | false
          fixedBox: true, // 固定截图框大小 不允许改变	false	true | false
          original: false, // 上传图片按照原始比例渲染	false	true | false
          canMoveBox:  false, // 截图框能否拖动	true	true | false
          autoCrop: true, // 是否默认生成截图框	false	true || false
          canScale: true, // 图片是否允许滚轮缩放	true	true || false
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 236, // 默认生成截图框宽度	容器的80%	0~max
          autoCropHeight: 277, // 默认生成截图框高度	容器的80%	0~max
          centerBox: false, // 截图框是否被限制在图片里面	false	true | false
          high: true, // 是否按照设备的dpr 输出等比例图片	true	true | false
          cropData: {},
          enlarge: 1,
          mode: 'contain',
          maxImgSize: 3000,
          limitMinSize: [282, 325]
        },
      /** 上传 裁剪 存 商户头像 end */


      /** 上传 静态码 */
        staticCodeImg: '',
        staticCodeDialog: false,
        previews6: {},
        abc:{},
        lists6: [
          // {
          // 	img: 'https://fengyuanchen.github.io/cropper/images/picture.jpg'
          // },
          {
            img: "https://avatars2.githubusercontent.com/u/15681693?s=460&v=4"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_2.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_3.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Landscape_4.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_1.jpg"
          },
          {
            img: "http://cdn.xyxiao.cn/Portrait_2.jpg"
          }
        ],
        option6: {
          img: "", // 裁剪图片的地址	空	url 地址 || base64 || blob
          size: 1,
          full: true, // 是否输出原图比例的截图	false	true | false
          outputType: 'png', // 裁剪生成图片的格式	jpg (jpg 需要传入jpeg)	jpeg || png || webp
          canMove: true, // 上传图片是否可以移动	true	true | false
          fixedBox: true, // 固定截图框大小 不允许改变	false	true | false
          original: false, // 上传图片按照原始比例渲染	false	true | false
          canMoveBox:  false, // 截图框能否拖动	true	true | false
          autoCrop: true, // 是否默认生成截图框	false	true || false
          canScale: true, // 图片是否允许滚轮缩放	true	true || false
          // 只有自动截图开启 宽度高度才生效
          autoCropWidth: 940, // 默认生成截图框宽度	容器的80%	0~max
          autoCropHeight: 670, // 默认生成截图框高度	容器的80%	0~max
          centerBox: false, // 截图框是否被限制在图片里面	false	true | false
          high: true, // 是否按照设备的dpr 输出等比例图片	true	true | false
          cropData: {},
          enlarge: 1,
          mode: 'contain',
          maxImgSize: 3000,

        },
        // fixed: false, //	是否开启截图框宽高固定比例	true	true | false
        // fixedNumber:[9.4, 6.7], //	截图框的宽高比例	[1, 1]	[宽度, 高度]

      }
    },
    components:{
      MySelect
    },
    props: {
      businessId: {}
    },
    watch: {
      '$store.state.app.marketId'(val, oldVal){
        this.goodsToken()
        this.getBusinessType()
        this.businessId !== 'add' && this.fetch(this.businessId)
        this.businessId !== 'add' && this.getAlreadyExist()
      },
    },
    mounted() {
      
      /*const a = this.$route.query.a
      console.log(JSON.parse(a))*/

      this.goodsToken()
      this.getBusinessType()
      this.businessId !== 'add' && this.fetch(this.businessId)
      this.businessId === 'add' && this.hideTabs()

      this.businessId !== 'add' && this.getAlreadyExist()
    },
    methods: {

    /** 上传 裁剪 存 背景图 start */
      putb64(picBase,myUptoken) {
        /* picUrl 用来存储返回来的url*/
        // let picUrl
        /* 把头部的 data:image/png;base64, 去掉。（注意：base64后面的逗号也去掉）*/
        picBase = picBase.substring(22) // data.replace(/^.*?base64,/, '') // 去除 "data:image/png;base64," 前缀(.*? - 非贪婪模式)
        /* 通过base64编码字符流计算文件流大小函数 */
        function fileSize(str) {
          let fileSize;
          if (str.indexOf('=') > 0) {
            let indexOf = str.indexOf('=');
            str = str.substring(0, indexOf); //把末尾的’=‘号去掉
          }
          fileSize = parseInt(str.length - (str.length / 8) * 2);
          return fileSize;
        }
        /*把字符串转换成json*/
        function strToJson(str) {
          let json = eval('(' + str + ')')
          return json
        }
        let url = "https://upload.qiniup.com/putb64/" + fileSize(picBase)
        let xhr = new XMLHttpRequest();

        xhr.open("POST", url, false)
        xhr.setRequestHeader("Content-Type", "application/octet-stream")
        xhr.setRequestHeader("Authorization", "UpToken " + myUptoken)
        xhr.send(picBase)

        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            let keyText = xhr.responseText
            /*返回的key是字符串，需要装换成json*/
            keyText = strToJson(keyText)
            /* 前面是七牛云空间网址，keyText.key 是返回的图片文件名，这里得到的picUrl就是我们需要的图片地址了*/
            // picUrl = "http://cailanzi.image.cailanzi001.com/" + keyText.key
          }
        }
        // 背景图
        // console.log(JSON.parse(xhr.response).key)
        this.qiniuImg.backimg = "http://cailanzi.image.cailanzi001.com/" + JSON.parse(xhr.response).key
      },
      // 获取已存在的图片渲染到页面上
      changeImg(backimg) {
        this.previews.url = backimg
      },
      // 实时预览函数
      realTime(data) {
        this.previews = data;
      },
      down(type) {
        // event.preventDefault()
        // 输出
        if (type === "blob") {
          this.$refs.cropper.getCropBlob(data => {
            this.downImg = window.URL.createObjectURL(data);
            if (window.navigator.msSaveBlob) {
              var blobObject = new Blob([data]);
              window.navigator.msSaveBlob(blobObject, "demo.png");
            } else {
              this.$nextTick(() => {
                this.$refs.downloadDom.click();
              });
            }
          });
        } else {
          this.$refs.cropper.getCropData(data => {
            // console.log('down data base64 这个是裁剪后的图片地址')
            // console.log(data)
            this.putb64(data, this.uploadToken.token)
            this.backimgDialog = false
          });
        }
      },
      uploadImg(e, num) {
        //上传图片
        // this.option.img
        var file = e.target.files[0];
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
          return false;
        }
        var reader = new FileReader();
        reader.onload = e => {
          let data;
          if (typeof e.target.result === "object") {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]));
          } else {
            data = e.target.result;
          }
          if (num === 1) {
            this.option.img = data;
          } else if (num === 2) {
            this.example2.img = data;
          }
          this.$refs.uploadImg.value = ''
        };
        // 转化为base64
        // reader.readAsDataURL(file)
        // 转化为blob
        reader.readAsArrayBuffer(file);
        this.backimgDialog = true
      },
      imgLoad(msg) {
        // console.log(msg);
      },
      cropMoving(data) {
        // console.log(data, '截图框当前坐标')
        this.option.cropData = data;
      },
    /** 上传 裁剪 存 背景图 end */


    /** 上传 裁剪 存 前景图 start */
      putb641(picBase,myUptoken) {
        /* picUrl 用来存储返回来的url*/
        // let picUrl
        /* 把头部的 data:image/png;base64, 去掉。（注意：base64后面的逗号也去掉）*/
        picBase = picBase.substring(22) // data.replace(/^.*?base64,/, '') // 去除 "data:image/png;base64," 前缀(.*? - 非贪婪模式)
        /* 通过base64编码字符流计算文件流大小函数 */
        function fileSize(str) {
          let fileSize;
          if (str.indexOf('=') > 0) {
            let indexOf = str.indexOf('=');
            str = str.substring(0, indexOf); //把末尾的’=‘号去掉
          }
          fileSize = parseInt(str.length - (str.length / 8) * 2);
          return fileSize;
        }
        /*把字符串转换成json*/
        function strToJson(str) {
          let json = eval('(' + str + ')')
          return json
        }
        let url = "https://upload.qiniup.com/putb64/" + fileSize(picBase)
        let xhr = new XMLHttpRequest();

        xhr.open("POST", url, false)
        xhr.setRequestHeader("Content-Type", "application/octet-stream")
        xhr.setRequestHeader("Authorization", "UpToken " + myUptoken)
        xhr.send(picBase)

        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            let keyText = xhr.responseText
            /*返回的key是字符串，需要装换成json*/
            keyText = strToJson(keyText)
            /* 前面是七牛云空间网址，keyText.key 是返回的图片文件名，这里得到的picUrl就是我们需要的图片地址了*/
            // picUrl = "http://cailanzi.image.cailanzi001.com/" + keyText.key
          }
        }
        // 前景图
        // console.log(JSON.parse(xhr.response).key)
        this.qiniuImg.frontimg = "http://cailanzi.image.cailanzi001.com/" + JSON.parse(xhr.response).key
      },
      // 获取已存在的图片渲染到页面上
      changeImg1(frontimg) {
        this.previews1.url = frontimg
      },
      // 实时预览函数
      realTime1(data) {
        this.previews1 = data
      },
      down1(type) {
        // event.preventDefault()
        // 输出
        if (type === "blob") {
          this.$refs.cropper1.getCropBlob(data => {
            this.downImg = window.URL.createObjectURL(data);
            if (window.navigator.msSaveBlob) {
              var blobObject = new Blob([data]);
              window.navigator.msSaveBlob(blobObject, "demo.png");
            } else {
              this.$nextTick(() => {
                this.$refs.downloadDom.click();
              });
            }
          });
        } else {
          this.$refs.cropper1.getCropData(data => {
            // console.log('down1 data base64 这个是裁剪后的图片地址')
            // console.log(data)
            this.putb641(data, this.uploadToken.token)
            this.frontimgDialog = false
          });
        }
      },
      uploadImg1(e, num) {
        //上传图片
        // this.option.img
        let file = e.target.files[0];
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
          return false;
        }
        let reader = new FileReader();
        reader.onload = e => {
          let data;
          if (typeof e.target.result === "object") {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]));
          } else {
            data = e.target.result;
          }
          if (num === 1) {
            this.option1.img = data;
          } else if (num === 2) {
            this.example2.img = data;
          }
          this.$refs.uploadImg1.value = ''
        };
        // 转化为base64
        // reader.readAsDataURL(file)
        // 转化为blob
        reader.readAsArrayBuffer(file);
        this.frontimgDialog = true
      },
      imgLoad1(msg) {
        // console.log(msg);
      },
      cropMoving1(data) {
        // console.log(data, '截图框当前坐标')
        this.option1.cropData = data;
      },
    /** 上传 裁剪 存 前景图 end */


    /** 上传 裁剪 存 下方图 start */
      putb642(picBase,myUptoken) {
        /* picUrl 用来存储返回来的url*/
        // let picUrl
        /* 把头部的 data:image/png;base64, 去掉。（注意：base64后面的逗号也去掉）*/
        picBase = picBase.substring(22) // data.replace(/^.*?base64,/, '') // 去除 "data:image/png;base64," 前缀(.*? - 非贪婪模式)
        /* 通过base64编码字符流计算文件流大小函数 */
        function fileSize(str) {
          let fileSize;
          if (str.indexOf('=') > 0) {
            let indexOf = str.indexOf('=');
            str = str.substring(0, indexOf); //把末尾的’=‘号去掉
          }
          fileSize = parseInt(str.length - (str.length / 8) * 2);
          return fileSize;
        }
        /*把字符串转换成json*/
        function strToJson(str) {
          let json = eval('(' + str + ')')
          return json
        }
        let url = "https://upload.qiniup.com/putb64/" + fileSize(picBase)
        let xhr = new XMLHttpRequest();


        xhr.open("POST", url, false)
        xhr.setRequestHeader("Content-Type", "application/octet-stream")
        xhr.setRequestHeader("Authorization", "UpToken " + myUptoken)
        xhr.send(picBase)

        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            let keyText = xhr.responseText
            /*返回的key是字符串，需要装换成json*/
            keyText = strToJson(keyText)
            /* 前面是七牛云空间网址，keyText.key 是返回的图片文件名，这里得到的picUrl就是我们需要的图片地址了*/
            // picUrl = "http://cailanzi.image.cailanzi001.com/" + keyText.key
          }
        }
        // 下方图
        // console.log(JSON.parse(xhr.response).key)
        this.qiniuImg.bottomimg = "http://cailanzi.image.cailanzi001.com/" + JSON.parse(xhr.response).key
      },
      // 获取已存在的图片渲染到页面上
      changeImg2(bottomimg) {
        this.previews2.url = bottomimg
      },
      // 实时预览函数
      realTime2(data) {
        this.previews2 = data
      },
      down2(type) {
        // event.preventDefault()
        // 输出
        if (type === "blob") {
          this.$refs.cropper2.getCropBlob(data => {
            this.downImg = window.URL.createObjectURL(data);
            if (window.navigator.msSaveBlob) {
              var blobObject = new Blob([data]);
              window.navigator.msSaveBlob(blobObject, "demo.png");
            } else {
              this.$nextTick(() => {
                this.$refs.downloadDom.click();
              });
            }
          });
        } else {
          this.$refs.cropper2.getCropData(data => {
            // console.log('down2 data base64 这个是裁剪后的图片地址')
            // console.log(data)
            this.putb642(data, this.uploadToken.token)
            this.bottomimgDialog = false
          });
        }
      },
      uploadImg2(e, num) {
        //上传图片
        // this.option.img
        let file = e.target.files[0];
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
          return false;
        }
        let reader = new FileReader();
        reader.onload = e => {
          let data;
          if (typeof e.target.result === "object") {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]));
          } else {
            data = e.target.result;
          }
          if (num === 1) {
            this.option2.img = data;
          } else if (num === 2) {
            this.example2.img = data;
          }
          this.$refs.uploadImg2.value = ''
        };
        // 转化为base64
        // reader.readAsDataURL(file)
        // 转化为blob
        reader.readAsArrayBuffer(file);
        this.bottomimgDialog = true
      },
      imgLoad2(msg) {
        // console.log(msg);
      },
      cropMoving2(data) {
        // console.log(data, '截图框当前坐标')
        this.option2.cropData = data;
      },
    /** 上传 裁剪 存 下方图 end */


    /** 上传 裁剪 存 扩展图1 start */
      putb643(picBase,myUptoken) {
        /* picUrl 用来存储返回来的url*/
        // let picUrl
        /* 把头部的 data:image/png;base64, 去掉。（注意：base64后面的逗号也去掉）*/
        picBase = picBase.substring(22) // data.replace(/^.*?base64,/, '') // 去除 "data:image/png;base64," 前缀(.*? - 非贪婪模式)
        /* 通过base64编码字符流计算文件流大小函数 */
        function fileSize(str) {
          let fileSize;
          if (str.indexOf('=') > 0) {
            let indexOf = str.indexOf('=');
            str = str.substring(0, indexOf); //把末尾的’=‘号去掉
          }
          fileSize = parseInt(str.length - (str.length / 8) * 2);
          return fileSize;
        }
        /*把字符串转换成json*/
        function strToJson(str) {
          let json = eval('(' + str + ')')
          return json
        }
        let url = "https://upload.qiniup.com/putb64/" + fileSize(picBase)
        let xhr = new XMLHttpRequest();

        xhr.open("POST", url, false)
        xhr.setRequestHeader("Content-Type", "application/octet-stream")
        xhr.setRequestHeader("Authorization", "UpToken " + myUptoken)
        xhr.send(picBase)

        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            let keyText = xhr.responseText
            /*返回的key是字符串，需要装换成json*/
            keyText = strToJson(keyText)
            /* 前面是七牛云空间网址，keyText.key 是返回的图片文件名，这里得到的picUrl就是我们需要的图片地址了*/
            // picUrl = "http://cailanzi.image.cailanzi001.com/" + keyText.key
          }
        }
        // 扩展图1
        // console.log(JSON.parse(xhr.response).key)
        this.qiniuImg.extraimg1 = "http://cailanzi.image.cailanzi001.com/" + JSON.parse(xhr.response).key
      },
      // 获取已存在的图片渲染到页面上
      changeImg3(extraimg1) {
        this.previews3.url = extraimg1
      },
      // 实时预览函数
      realTime3(data) {
        this.previews3 = data
      },
      down3(type) {
        // event.preventDefault()
        // 输出
        if (type === "blob") {
          this.$refs.cropper3.getCropBlob(data => {
            this.downImg = window.URL.createObjectURL(data);
            if (window.navigator.msSaveBlob) {
              var blobObject = new Blob([data]);
              window.navigator.msSaveBlob(blobObject, "demo.png");
            } else {
              this.$nextTick(() => {
                this.$refs.downloadDom.click();
              });
            }
          });
        } else {
          this.$refs.cropper3.getCropData(data => {
            // console.log('down3 data base64 这个是裁剪后的图片地址')
            // console.log(data)
            this.putb643(data, this.uploadToken.token)
            this.extraimg1Dialog = false
          });
        }
      },
      uploadImg3(e, num) {
        //上传图片
        // this.option.img
        let file = e.target.files[0];
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
          return false;
        }
        let reader = new FileReader();
        reader.onload = e => {
          let data;
          if (typeof e.target.result === "object") {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]));
          } else {
            data = e.target.result;
          }
          if (num === 1) {
            this.option3.img = data;
          } else if (num === 3) {
            this.example3.img = data;
          }
          this.$refs.uploadImg3.value = ''
        };
        // 转化为base64
        // reader.readAsDataURL(file)
        // 转化为blob
        reader.readAsArrayBuffer(file);
        this.extraimg1Dialog = true
      },
      imgLoad3(msg) {
        // console.log(msg);
      },
      cropMoving3(data) {
        // console.log(data, '截图框当前坐标')
        this.option3.cropData = data;
      },
    /** 上传 裁剪 存 扩展图1 end */


    /** 上传 裁剪 存 扩展图2 start */
      putb644(picBase,myUptoken) {
        /* picUrl 用来存储返回来的url*/
        // let picUrl
        /* 把头部的 data:image/png;base64, 去掉。（注意：base64后面的逗号也去掉）*/
        picBase = picBase.substring(22) // data.replace(/^.*?base64,/, '') // 去除 "data:image/png;base64," 前缀(.*? - 非贪婪模式)
        /* 通过base64编码字符流计算文件流大小函数 */
        function fileSize(str) {
          let fileSize;
          if (str.indexOf('=') > 0) {
            let indexOf = str.indexOf('=');
            str = str.substring(0, indexOf); //把末尾的’=‘号去掉
          }
          fileSize = parseInt(str.length - (str.length / 8) * 2);
          return fileSize;
        }
        /*把字符串转换成json*/
        function strToJson(str) {
          let json = eval('(' + str + ')')
          return json
        }
        let url = "https://upload.qiniup.com/putb64/" + fileSize(picBase)
        let xhr = new XMLHttpRequest();

        xhr.open("POST", url, false)
        xhr.setRequestHeader("Content-Type", "application/octet-stream")
        xhr.setRequestHeader("Authorization", "UpToken " + myUptoken)
        xhr.send(picBase)

        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            let keyText = xhr.responseText
            /*返回的key是字符串，需要装换成json*/
            keyText = strToJson(keyText)
            /* 前面是七牛云空间网址，keyText.key 是返回的图片文件名，这里得到的picUrl就是我们需要的图片地址了*/
            // picUrl = "http://cailanzi.image.cailanzi001.com/" + keyText.key
          }
        }
        // 扩展图2
        // console.log(JSON.parse(xhr.response).key)
        this.qiniuImg.extraimg2 = "http://cailanzi.image.cailanzi001.com/" + JSON.parse(xhr.response).key
      },
      // 获取已存在的图片渲染到页面上
      changeImg4(extraimg2) {
        this.previews4.url = extraimg2
      },
      // 实时预览函数
      realTime4(data) {
        this.previews4 = data
      },
      down4(type) {
        // event.preventDefault()
        // 输出
        if (type === "blob") {
          this.$refs.cropper4.getCropBlob(data => {
            this.downImg = window.URL.createObjectURL(data);
            if (window.navigator.msSaveBlob) {
              var blobObject = new Blob([data]);
              window.navigator.msSaveBlob(blobObject, "demo.png");
            } else {
              this.$nextTick(() => {
                this.$refs.downloadDom.click();
              });
            }
          });
        } else {
          this.$refs.cropper4.getCropData(data => {
            // console.log('down4 data base64 这个是裁剪后的图片地址')
            // console.log(data)
            this.putb644(data, this.uploadToken.token)
            this.extraimg2Dialog = false
          });
        }
      },
      uploadImg4(e, num) {
        //上传图片
        // this.option.img
        let file = e.target.files[0];
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
          return false;
        }
        let reader = new FileReader();
        reader.onload = e => {
          let data;
          if (typeof e.target.result === "object") {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]));
          } else {
            data = e.target.result;
          }
          if (num === 1) {
            this.option4.img = data;
          } else if (num === 4) {
            this.example4.img = data;
          }
          this.$refs.uploadImg4.value = ''
        };
        // 转化为base64
        // reader.readAsDataURL(file)
        // 转化为blob
        reader.readAsArrayBuffer(file);
        this.extraimg2Dialog = true
      },
      imgLoad4(msg) {
        // console.log(msg);
      },
      cropMoving4(data) {
        // console.log(data, '截图框当前坐标')
        this.option4.cropData = data;
      },
    /** 上传 裁剪 存 扩展图2 end */


    /** 上传 裁剪 存 商户头像 start */
      putb645(picBase,myUptoken) {
        /* picUrl 用来存储返回来的url*/
        // let picUrl
        /* 把头部的 data:image/png;base64, 去掉。（注意：base64后面的逗号也去掉）*/
        picBase = picBase.substring(22) // data.replace(/^.*?base64,/, '') // 去除 "data:image/png;base64," 前缀(.*? - 非贪婪模式)
        /* 通过base64编码字符流计算文件流大小函数 */
        function fileSize(str) {
          let fileSize;
          if (str.indexOf('=') > 0) {
            let indexOf = str.indexOf('=');
            str = str.substring(0, indexOf); //把末尾的’=‘号去掉
          }
          fileSize = parseInt(str.length - (str.length / 8) * 2);
          return fileSize;
        }
        /*把字符串转换成json*/
        function strToJson(str) {
          let json = eval('(' + str + ')')
          return json
        }
        let url = "https://upload.qiniup.com/putb64/" + fileSize(picBase)
        let xhr = new XMLHttpRequest();

        xhr.open("POST", url, false)
        xhr.setRequestHeader("Content-Type", "application/octet-stream")
        xhr.setRequestHeader("Authorization", "UpToken " + myUptoken)
        xhr.send(picBase)

        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            let keyText = xhr.responseText
            /*返回的key是字符串，需要装换成json*/
            keyText = strToJson(keyText)
            /* 前面是七牛云空间网址，keyText.key 是返回的图片文件名，这里得到的picUrl就是我们需要的图片地址了*/
            // picUrl = "http://cailanzi.image.cailanzi001.com/" + keyText.key
          }
        }
        // 扩展图1
        // console.log(JSON.parse(xhr.response).key)
        this.model.businessFaceImg = "http://cailanzi.image.cailanzi001.com/" + JSON.parse(xhr.response).key
      },
      // 获取已存在的图片渲染到页面上
      changeImg5(businessFaceImg) {
        this.previews5.url = businessFaceImg
      },
      // 实时预览函数
      realTime5(data) {
        this.previews5 = data
      },
      down5(type) {
        // event.preventDefault()
        // 输出
        if (type === "blob") {
          this.$refs.cropper5.getCropBlob(data => {
            this.downImg = window.URL.createObjectURL(data);
            if (window.navigator.msSaveBlob) {
              var blobObject = new Blob([data]);
              window.navigator.msSaveBlob(blobObject, "demo.png");
            } else {
              this.$nextTick(() => {
                this.$refs.downloadDom.click();
              });
            }
          });
        } else {
          this.$refs.cropper5.getCropData(data => {
            // console.log('down5 data base64 这个是裁剪后的图片地址')
            // console.log(data)
            this.putb645(data, this.uploadToken.token)
            this.avatarDialog = false
          });
        }
      },
      uploadImg5(e, num) {
        //上传图片
        // this.option.img
        let file = e.target.files[0];
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
          return false;
        }
        let reader = new FileReader();
        reader.onload = e => {
          let data;
          if (typeof e.target.result === "object") {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]));
          } else {
            data = e.target.result;
          }
          if (num === 1) {
            this.option5.img = data;
          } else if (num === 4) {
            this.example4.img = data;
          }
          this.$refs.uploadImg5.value = ''
        };
        this.$refs.Avatar.clearValidate();
        // 转化为base64
        // reader.readAsDataURL(file)
        // 转化为blob
        reader.readAsArrayBuffer(file);
        this.avatarDialog = true
      },
      imgLoad5(msg) {
        // console.log(msg);
      },
      cropMoving5(data) {
        // console.log(data, '截图框当前坐标')
        this.option5.cropData = data;
      },
    /** 上传 裁剪 存 商户头像 end */


    /** 上传 裁剪 存 静态码 start */
      putb646(picBase,myUptoken) {
        /* picUrl 用来存储返回来的url*/
        // let picUrl
        /* 把头部的 data:image/png;base64, 去掉。（注意：base64后面的逗号也去掉）*/
        picBase = picBase.substring(22) // data.replace(/^.*?base64,/, '') // 去除 "data:image/png;base64," 前缀(.*? - 非贪婪模式)
        /* 通过base64编码字符流计算文件流大小函数 */
        function fileSize(str) {
          let fileSize;
          if (str.indexOf('=') > 0) {
            let indexOf = str.indexOf('=');
            str = str.substring(0, indexOf); //把末尾的’=‘号去掉
          }
          fileSize = parseInt(str.length - (str.length / 8) * 2);
          return fileSize;
        }
        /*把字符串转换成json*/
        function strToJson(str) {
          let json = eval('(' + str + ')')
          return json
        }
        let url = "https://upload.qiniup.com/putb64/" + fileSize(picBase)
        let xhr = new XMLHttpRequest();

        xhr.open("POST", url, false)
        xhr.setRequestHeader("Content-Type", "application/octet-stream")
        xhr.setRequestHeader("Authorization", "UpToken " + myUptoken)
        xhr.send(picBase)

        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            let keyText = xhr.responseText
            /*返回的key是字符串，需要装换成json*/
            keyText = strToJson(keyText)
            /* 前面是七牛云空间网址，keyText.key 是返回的图片文件名，这里得到的picUrl就是我们需要的图片地址了*/
            // picUrl = "http://cailanzi.image.cailanzi001.com/" + keyText.key
          }
        }
        //
        // console.log(JSON.parse(xhr.response).key)
        this.staticCodeImg = "http://cailanzi.image.cailanzi001.com/" + JSON.parse(xhr.response).key
      },
      // 获取已存在的图片渲染到页面上
      changeImg6(staticCodeImg) {
        this.previews6.url = staticCodeImg
      },
      // 实时预览函数
      realTime6(data) {
        this.previews6 = data
      },
      down6(type) {
        // event.preventDefault()
        // 输出
        if (type === "blob") {
          this.$refs.cropper6.getCropBlob(data => {
            this.downImg = window.URL.createObjectURL(data);
            if (window.navigator.msSaveBlob) {
              var blobObject = new Blob([data]);
              window.navigator.msSaveBlob(blobObject, "demo.png");
            } else {
              this.$nextTick(() => {
                this.$refs.downloadDom.click();
              });
            }
          });
        } else {
          this.$refs.cropper6.getCropData(data => {
            // console.log('down6 data base64 这个是裁剪后的图片地址')
            // console.log(data)
            this.putb646(data, this.uploadToken.token)
            this.staticCodeDialog = false
          });
        }
      },
      uploadImg6(e, num) {
        //上传图片
        // this.option.img
        let file = e.target.files[0];
        if (!/\.(gif|jpg|jpeg|png|bmp|GIF|JPG|PNG)$/.test(e.target.value)) {
          alert("图片类型必须是.gif,jpeg,jpg,png,bmp中的一种");
          return false;
        }
        let reader = new FileReader();
        reader.onload = e => {
          let data;
          if (typeof e.target.result === "object") {
            // 把Array Buffer转化为blob 如果是base64不需要
            data = window.URL.createObjectURL(new Blob([e.target.result]));
          } else {
            data = e.target.result;
          }
          if (num === 1) {
            this.option6.img = data;
          } else if (num === 4) {
            this.example4.img = data;
          }
          this.$refs.uploadImg6.value = ''
        };
        // 转化为base64
        // reader.readAsDataURL(file)
        // 转化为blob
        reader.readAsArrayBuffer(file);
        this.staticCodeDialog = true
      },
      imgLoad6(msg) {
        // console.log(msg);
      },
      cropMoving6(data) {
        // console.log(data, '截图框当前坐标')
        this.option6.cropData = data;
      },
    /** 上传 裁剪 存 静态码 end */






      // 先获取已有图片
      getAlreadyExist(){
        this.$store.dispatch('business/getAlreadyExist', {businessId: this.businessId}).then(
          data => {
            this.changeImg(data.backimg)
            this.changeImg1(data.frontimg)
            this.changeImg2(data.bottomimg)
            this.changeImg3(data.extraimg1)
            this.changeImg4(data.extraimg2)
            this.qiniuImg.backimg = data.backimg
            this.qiniuImg.frontimg = data.frontimg
            this.qiniuImg.bottomimg = data.bottomimg
            this.qiniuImg.extraimg1 = data.extraimg1
            this.qiniuImg.extraimg2 = data.extraimg2
          }
        ).catch(err => {})
      },
      // 提交所有图片
      submitAllImg(){
        let obj = {
          businesId: this.businessId,
          backimg: this.qiniuImg.backimg || '',
          frontimg: this.qiniuImg.frontimg || '',
          bottomimg: this.qiniuImg.bottomimg || '',
          extraimg1: this.qiniuImg.extraimg1 || '',
          extraimg2: this.qiniuImg.extraimg2 || ''
        }
        this.$store.dispatch('business/submitAllImg', obj).then(
          data => {
            if(data){
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              setTimeout(()=>{
                history.go(0)
              }, 1000)
            }
          }
        ).catch(err => {})
      },

      // 提交静态码
      submitStaticCodeImg(){
        let obj = {
          businesId: this.businessId,
          payQrImg: this.staticCodeImg || ''
        }
        this.$store.dispatch('business/submitStaticCodeImg', obj).then(
          data => {
            if(data){
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              setTimeout(()=>{
                history.go(0)
              }, 1000)
            }
          }
        ).catch(err => {})
      },





      // tabs
      handleClick(tab, event) {
        console.log(tab, event);
        // 如果 tabs 为 second 时，获得 开通状态
        if(tab.name === 'second'){
          this.dredgeStatus()
        }else if (tab.name === 'third'){
          this.getAlreadyExist()
        }
      },

      // Tabs 隐藏其中一个 el-tab-pane
      hideTabs(){
        this.$nextTick(() => {
          this.$refs.tabs.$children[0].$refs.tabs[1].style.display="none"
          this.$refs.tabs.$children[0].$refs.tabs[2].style.display="none"
          this.$refs.tabs.$children[0].$refs.tabs[3].style.display="none"
        })
      },
      // 点击重发
      bindCardResetSendSms(){
        // console.log('点击重发')
        this.$store.dispatch('business/bindCardResetSendSms', {businessId: this.businessId}).then(
          data => {
            // console.log('data 银行卡 点击重发')
            // console.log(data)
            if(data){
              this.validation()
            }
          }
        ).catch(err => {})
      },
      // 输入验证码 进行最后验证 pS = 5
      finallyVerificationClick(){
        // console.log('银行卡 输入验证码 进行最后验证')
        // 弹框
        this.messageDialog = true
      },
      // 更换银行卡 bS = 1
      replaceBindCardClick(){
        this.$store.dispatch('business/sendSms',{businessId: this.businessId}).then(
          data => {
            // console.log('data 银行卡 更换银行卡')
            // console.log(data)
            // 弹框
            this.messageDialog = true
            this.flag = 1
          }
        ).catch(err => {})
      },
      // 点击验证
      validation(){
        // console.log('点击验证')
        this.messageDialog = false
        if(this.flag ===1){
          // 验证码有效性验证接口
          let obj = {
            businessId: this.businessId, //	int	true	商户id
            code: this.message //	string	true	验证码
          }
          this.$store.dispatch('business/msgCodeValid', obj).then(
            data => {
              // console.log('data 银行卡 验证码有效性验证接口')
              // console.log(data)
              if(data){
                this.$message({
                  type: 'success',
                  message: '验证操作成功'
                })
                this.dredgeStatus()
              }
            }
          ).catch(err => {})
        }else{
          // 【支付】确认绑卡 api
          let obj = {
            businessId: this.businessId, //	int	true	商户id
            smsCode: this.message //	string	true	手机验证码
          }
          this.$store.dispatch('business/bindcardConfirm', obj).then(
            data => {
              // console.log('data 银行卡 【支付】确认绑卡')
              // console.log(data)
              if(data){
                this.$message({
                  type: 'success',
                  message: '绑卡操作成功'
                })
                this.dredgeStatus()
              }
            }
          ).catch(err => {})
        }




      },
      close(){
        this.message = ''
      },
      // 绑定银行卡
      bindCardClick(){
        // console.log('点了 绑定银行卡 按钮')
        if(this.payment.bankState === 1){
          // this.payment.bankState 等于 1 时 ：验证码发送短信 api => 返回 填入 => 点确定 验证码有效性验证 api
          this.$store.dispatch('business/sendSms',{businessId: this.businessId}).then(
            data => {
              // console.log('data 银行卡 等于 1 时 验证码发送短信 api => 返回 填入 => 点确定 验证码有效性验证 api')
              // console.log(data)
              // 弹框
              this.messageDialog = true
              this.flag = 1
            }
          ).catch(err => {})
        }else{
          // 先请求api在出弹框 输入验证码 点击 请求 确认绑卡 api
          // this.payment.bankState 等于 0、2、3 时直接调用： 【支付】变更银行卡，并发送验证码 api => 改完之后 点ok


          let obj = {
            businessId: this.businessId, //	int	true	商户id
            phoneNumber: this.modelSecond.bindCardPhone, // string	true	手机号码
            idCardNo: this.modelSecond.idNumber, // 	string	true	身份证号码
            bankCardImg: this.modelSecond.bankCardImg, // 	string	true	银行卡图片	七牛云
            bank: this.modelSecond.bank, // 	string	true	银行名称
            accountName: this.modelSecond.idCardFullName, // 	string	true	帐户名称
            account: this.modelSecond.account, // 	string	true	银行卡号码
            cardtype: '' // 	string	true	储蓄卡类型	可为空
          }
          this.$store.dispatch('business/changeBankCard', obj).then(
            data => {
              // console.log('data 银行卡 等于 0、2、3 时直接调用： 【支付】变更银行卡，并发送验证码 api => 改完之后 点ok')
              // console.log(data)
              // 弹框
              this.messageDialog = true
              this.flag = 2
            }
          ).catch(err => {})

        }
      },
      // 实名认证
      realNameClick(){
        let obj = {
          businessId: this.businessId,
          idCardFullName: this.modelSecond.idCardFullName, //	string	true	姓名
          idCardNo: this.modelSecond.idNumber, //	string	true	身份证号码
          idEndDate: this.modelSecond.idValidity //	string	true	截至日期	长期有效，时传值：9999-12-31
        }
        this.$store.dispatch('business/realNameClick', obj).then(
          data => {
            if(data){
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.dredgeStatus()
            }
          }
        ).catch(err => {})
      },
      // 获得 开通状态
      dredgeStatus(){
        this.businessId !== 'add' && this.fetch(this.businessId)
        this.$store.dispatch('business/dredgeStatus',{businessId: this.businessId/1}).then(
          data => {
            // console.log('data 如果 tabs 为 second 时，调用 开通状态')
            // console.log(data)
            // console.log(data.payment.paymentStatus)

            this.payment.paymentStatus = data.payment.paymentStatus
            this.payment.realnameState = data.payment.realnameState
            this.payment.bankState = data.payment.bankState
            switch (data.payment.paymentStatus) {
              case 1:
                this.bankName = '未开通'
                this.idName = '未开通'
                break
              case 2:
                this.bankName = '已提交材料'
                this.idName = '已提交材料'
                break
              case 3:
                this.bankName = '已提交(job执行完)'
                this.idName = '已提交(job执行完)'
                break
              case 4:
                this.bankName = '已开通'
                this.idName = '已开通'
                break
              case 5:
                this.bankName = '可以进行最后验证'
                this.idName = '可以进行最后验证'
                break
              case 6:
                switch (data.payment.realnameState){
                  case 3:
                  switch (data.payment.bankState){
                    case 1:
                      this.bankName = '银行卡已绑定（先发验证码api修改银行卡之后调用验证api)'
                      this.idName = '身份实名认证失败（可以修改身份证）'
                      break
                    case 0:
                      this.bankName = '银行卡未绑定（可以直接调用【支付】变更银行卡 的接口，并发送验证码)'
                      this.idName = '身份实名认证失败（可以修改身份证）'
                      break
                    case 2:
                      this.bankName = '银行卡待确认（可以直接调用【支付】变更银行卡 的接口，并发送验证码)'
                      this.idName = '身份实名认证失败（可以修改身份证）'
                      break
                    case 3:
                      this.bankName = '银行卡绑定失败（可以直接调用【支付】变更银行卡 的接口，并发送验证码)'
                      this.idName = '身份实名认证失败（可以修改身份证）'
                      break
                    // default:
                  }
                  break
                }
                break
            }
            // this.payment.paymentStatus = 1
            // this.payment = data.payment
          }
        ).catch(err => {
        })
      },
      mySelectedstallName(obj){
        this.model.stallName = obj.label
      },
      changeSex(val){
        this.model.sex = val
      },
      // 获取商户主营类型
      getBusinessType(){
        this.$store.dispatch('equipment/fetchBusinessType').then(
          data => {
            let items = []
            for (let item of data) {
              items.push({
                value: item.id + '',
                label: item.name
              })
            }
            this.businessTypeList = items
          }
        ).catch(err => {
          this.businessTypeList = []
        })
      },
      changeBusinessType(type){
        this.model.businessType = type + ''
        let obj = {}
        obj = this.businessTypeList.find((item)=>{
          return item.label === type
        })
        this.model.businessType = obj.label
      },
      changeStatus(val){
        this.model.status = val
      },
      // 身份证正面
      handleSuccessidCardFrontImg(res, file, fileList){
        // this.modelSecond.idCardFrontImg = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$store.dispatch('business/fetchidCardFrontImg',{imgFile: file.raw, side: 'face'}).then(
          data => {
            this.modelSecond.idCardFrontImg = data.idcard_img
            this.modelSecond.idNumber = data.num
            this.modelSecond.idCardFullName = data.name


            let obj = {
              businessId: this.businessId/1,
              img: data.idcard_img, //	string	true	图片地址	七牛云
              type: 1 //	int	true	类型	1.正面 2.反面 3.手持
            }
            this.uploadImage(obj)

            this.$refs.idCardFrontImg.clearFiles()
            // 上传图片认证
            // this.$store.dispatch('business/uploadImage', obj).then(
            //   data => {
            //     console.log('data 上传 图片认证')
            //     console.log(data)
            //   }
            // ).catch(err => {})
          }
        ).catch(err => {})

      },
      // 上传图片认证
      uploadImage(obj){
        this.$store.dispatch('business/uploadImage', obj).then(
          data => {
            if(data){
              this.$message({
                type: 'success',
                message: '图片认证成功'
              })
            }
          }
        ).catch(err => {})
      },
      // 身份证反面
      handleSuccessidCardBackImg(res, file, fileList){
        // this.modelSecond.idCardBackImg = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$store.dispatch('business/fetchidCardBackImg',{imgFile: file.raw, side: 'back'}).then(
          data => {
            this.modelSecond.idCardBackImg = data.idcard_img
            this.modelSecond.idValidity = data.end_date
            if(data.end_date === '9999-12-31'){
              this.modelSecond.idTimeOrNoPer = 1
            }else{
              this.modelSecond.idTimeOrNoPer = 0
            }


            let obj = {
              businessId: this.businessId/1,
              img: data.idcard_img, //	string	true	图片地址	七牛云
              type: 2 //	int	true	类型	1.正面 2.反面 3.手持
            }
            this.uploadImage(obj)
            this.$refs.idCardBackImg.clearFiles()
          }
        ).catch(err => {})
      },
      // 手持身份证
      handleSuccesshandIdCardImg(res, file, fileList){
        this.modelSecond.handIdCardImg = 'http://cailanzi.image.cailanzi001.com/' + res.key


        let obj = {
          businessId: this.businessId/1,
          img: 'http://cailanzi.image.cailanzi001.com/' + res.key, //	string	true	图片地址	七牛云
          type: 3 //	int	true	类型	1.正面 2.反面 3.手持
        }
        this.uploadImage(obj)
        this.$refs.handIdCardImg.clearFiles()
      },
      // 银行卡图片
      handleSuccessbankCardImg(res, file, fileList){
        // this.modelSecond.bankCardImg = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$store.dispatch('business/fetchBankCardImg',{imgFile: file.raw}).then(
          data => {
            this.modelSecond.bankCardImg = data.cardimage
            this.modelSecond.account = data.cardnumber
            this.modelSecond.bank = data.bankname

            // 银行卡图片 银行卡四元素认证
            let obj = {
              bankCardNumber: data.cardnumber, //	string	true	银行卡号
              acctName: this.modelSecond.idCardFullName, // string	true	姓名
              idCardNumber: this.modelSecond.idNumber, //	string	true	身份证号
              mobilePhone: this.modelSecond.bindCardPhone //	string	flase	手机号
            }
            // return
            this.$store.dispatch('business/bankcardAuth', obj).then(
              data => {
                if(data){
                  this.$message({
                    type: 'success',
                    message: '图片认证成功'
                  })
                }
              }
            ).catch(err => {})
            this.$refs.bankCardImg.clearFiles()
          }
        ).catch(err => {})
      },
      // 营业执照
      handleSuccessbusinessLicenseImg(res, file, fileList){
        this.model.businessLicenseImg = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$refs.businessLicenseImg.clearFiles()
      },
      // 商户头像
      // handleSuccessbusinessFaceImg(res, file, fileList){
      //   this.model.businessFaceImg = 'http://cailanzi.image.cailanzi001.com/' + res.key
      // },
      // 门头照
      handleSuccessshopPhoto(res, file, fileList){
        this.model.shopPhoto = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$refs.shopPhoto.clearFiles()
      },
      // 站门头照
      handleSuccessstandDoorImg(res, file, fileList){
        this.model.standDoorImg = 'http://cailanzi.image.cailanzi001.com/' + res.key
        this.$refs.standDoorImg.clearFiles()
      },
      handleRemove(file, fileList) {
        console.log(file,fileList[0])
      },
      beforeUpload(file){
        const isPNG = file.type === "image/png"
        const isJPEG = file.type === "image/jpeg"
        const isJPG = file.type === "image/jpg"
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isPNG && !isJPEG && !isJPG) {
          this.$message.error("上传头像图片只能是 jpg、png、jpeg 格式!")
          return false
        }
        if (!isLt2M) {
          this.$message.error("上传头像图片大小不能超过 2MB!")
          return false
        }
        //将上传的文件名保存成key,把这个key拼接到外链地址
        const date = new Date()
        this.uploadToken.key=`bill${date.getFullYear()}${date.getMonth()+1}${date.getDate()}${date.getHours()}${date.getMinutes()}${date.getSeconds()}${Math.floor(Math.random()*100)}.${file.type.split('/')[1]}`
      },
      //获取上传文件时候的token
      goodsToken(){
        this.$store.dispatch('purchaseInfo/uptoken',{}).then(
          data => {
            this.uploadToken.token = data.data.uptoken
          }
        ).catch(err => {
        })
      },



      // 判断下，新增和编辑
      async save(){
        this.$refs.form.validate(valid => {
        if (valid) {
        if(this.businessId === 'add'){
          this.$store.dispatch("business/fetchBusinessAddSave", this.model).then ( data => {
            if(data){
              this.$message({
                type: 'success',
                message: '保存成功'
              })
              this.$router.push('/property/business')
            }
          })
        }else{
          this.$store.dispatch("business/fetchBusinessEditSave", this.model).then ( data => {
            if(data){
              this.$message({
                type: 'success',
                message: '保存成功'
              })
              this.$router.push('/property/business')
            }
          })
        }
         } else {
          this.$message.error("必填项未填");
          return false;
        }
      });
      },
      // 如果是编辑, 先获取详情, 填入表单里
      async fetch(businessId){
        this.$store.dispatch("business/fetchBusinessEditDetails", {businessId}).then(data=>{
          this.model = data
          this.modelSecond = data
          this.marketStyle = data.marketStyle
          this.changeImg5(data.businessFaceImg)
          this.changeImg6(data.payQrImg)
        })
      },
      // 开通状态为1 未开通时 编辑保存 第二个tabs的内容
      saveTabsSecond(){
        this.$store.dispatch("business/saveTabsSecond", this.modelSecond)
        this.$router.push('/property/business')
        this.$message({
          type: 'success',
          message: '保存成功'
        })
      },
    },
    create(){
      // 如果有businessId再执行这个函数
      this.businessId !== 'add' && this.fetch(this.businessId)
      this.businesId !== 'add' && this.getAlreadyExist()
    }
  }
</script>

<style lang="scss" scoped>
  /deep/ .el-input__inner{
    width: 194px;
  }
  .el-radio {
    margin-right: 10px;
  }
  .el-form-item {
    margin-bottom: 2px;
  }
  .button {
    background: #64d9d6;
    color: #fff;
    margin-left: 40px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

.content {
  // margin: auto;
  // max-width: 1200px;
  // margin-bottom: 100px;
}

.test-button {
  display: flex;
  flex-wrap: wrap;
}

.btn {
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  background: #fff;
  border: 1px solid #c0ccda;
  color: #1f2d3d;
  text-align: center;
  box-sizing: border-box;
  outline: none;
  margin: 20px 10px 30px 0px;
  padding: 9px 15px;
  font-size: 14px;
  border-radius: 4px;
  color: #fff;
  background-color: #50bfff;
  border-color: #50bfff;
  transition: all 0.2s ease;
  text-decoration: none;
  user-select: none;
}

.des {
  line-height: 30px;
}

code.language-html {
  padding: 10px 20px;
  margin: 10px 0px;
  display: block;
  background-color: #333;
  color: #fff;
  overflow-x: auto;
  font-family: Consolas, Monaco, Droid, Sans, Mono, Source, Code, Pro, Menlo,
    Lucida, Sans, Type, Writer, Ubuntu, Mono;
  border-radius: 5px;
  white-space: pre;
}

.show-info {
  margin-bottom: 10px;
}

.show-info h2 {
  line-height: 50px;
}

/*.title, .title:hover, .title-focus, .title:visited {
		color: black;
	}*/

.title {
  display: block;
  text-decoration: none;
  text-align: center;
  line-height: 1.5;
  margin: 20px 0px;
  background-image: -webkit-linear-gradient(
    left,
    #3498db,
    #f47920 10%,
    #d71345 20%,
    #f7acbc 30%,
    #ffd400 40%,
    #3498db 50%,
    #f47920 60%,
    #d71345 70%,
    #f7acbc 80%,
    #ffd400 90%,
    #3498db
  );
  color: transparent;
  -webkit-background-clip: text;
  background-size: 200% 100%;
  animation: slide 5s infinite linear;
  font-size: 40px;
}

.test {
  height: 700px;
}

.model {
  position: fixed;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  overflow: auto;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
}

.model-show {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  text-align: center;
}

.model img {
  display: block;
  margin: auto;
  max-width: 80%;
  width: auto;
  user-select: none;
  background-position: 0px 0px, 10px 10px;
  background-size: 20px 20px;
  background-image: linear-gradient(
      45deg,
      #eee 25%,
      transparent 25%,
      transparent 75%,
      #eee 75%,
      #eee 100%
    ),
    linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
}

.c-item {
  display: block;
  padding: 10px 0;
  user-select: none;
}

.pre {
	display: flex;
  flex-wrap: wrap;
}

.pre-item {
	padding-right: 20px;
}

@keyframes slide {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -100% 0;
  }
}

@media screen and (max-width: 1000px) {
  .content {
    // max-width: 90%;
    margin: auto;
  }

  .test {
    // height: 400px;
  }
  
}
::v-deep .el-form-item{
    margin-bottom: 12px;
  }
::v-deep .el-form-item__error{
  padding-top: 0px;
}
</style>
